<template>
  <div class="topSongAndCD">
    <van-tabs v-model:active="active" shrink line-height="0">
      <van-tab title="新歌｜">
        <van-swipe :loop="false" :width="360" :show-indicators="false">
          <van-swipe-item>
            <!-- <h1 >{{newSongList}}</h1> -->
            <a
              href=""
              class="songItem"
              v-for="song in newSongList.slice(0, 3)"
              :key="song.id"
            >
              <div class="cover">
                <img :src="song.picUrl" alt="" />
              </div>
              <div class="info">
                <div class="name">
                  <h4>{{ song.name }}</h4>
                  <h5 v-for="at in song.song.artists" :key="at.id">
                    {{ "-" + at.name }}
                  </h5>
                </div>
                <div class="desc">
                  <h5>{{ song.song.album.name }}</h5>
                </div>
              </div>
            </a>
          </van-swipe-item>
          <van-swipe-item>
            <!-- <h1 >{{newSongList}}</h1> -->
            <a
              href=""
              class="songItem"
              v-for="song in newSongList.slice(3, 6)"
              :key="song.id"
            >
              <div class="cover">
                <img :src="song.picUrl" alt="" />
              </div>
              <div class="info">
                <div class="name">
                  <h4>{{ song.name }}</h4>
                  <h5 v-for="at in song.song.artists" :key="at.id">
                    {{ at.name }}
                  </h5>
                </div>
                <div class="desc">
                  <h5>{{ song.song.album.name }}</h5>
                </div>
              </div>
            </a>
          </van-swipe-item>
        </van-swipe>
      </van-tab>
      <van-tab title="新碟｜">
        <van-swipe :loop="false" :show-indicators="false" :width="350">
          <van-swipe-item>
            <!-- <h1 >{{newSongList}}</h1> -->
            <a
              href=""
              class="songItem"
              v-for="album in newCDList.slice(0, 3)"
              :key="album.id"
            >
              <div class="cover">
                <img :src="album.picUrl" alt="" />
              </div>
              <div class="info">
                <div class="name">
                  <h4>{{ album.name }}</h4>-
                  <h5 v-for="at in album.artists" :key="at.id">
                    {{ at.name }}
                  </h5>
                </div>
                <!-- <div class="desc"><h5>{{song.song.album.name}}</h5></div> -->
              </div>
            </a>
          </van-swipe-item>
          <van-swipe-item>
            <!-- <h1 >{{newSongList}}</h1> -->
            <a
              href=""
              class="songItem"
              v-for="album in newCDList.slice(3, 6)"
              :key="album.id"
            >
              <div class="cover">
                <img :src="album.picUrl" alt="" />
              </div>
              <div class="info">
                <div class="name">
                  <h4>{{ album.name }}</h4>
                  <h5 v-for="at in album.artists" :key="at.id">
                    {{ at.name }}
                  </h5>
                </div>
                <!-- <div class="desc"><h5>{{song.song.album.name}}</h5></div> -->
              </div>
            </a>
          </van-swipe-item>
        </van-swipe>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { getNewSong, getNewCD } from "@/request/api/home";
import { onMounted } from "@vue/runtime-core";
import { toRefs } from "vue";
export default {
  name: "TopSongAndCD",
  setup(props) {
    const active = ref(0);
    const data = reactive({
      newSongList: [],
      newCDList: [],
    });
    getNewSong().then((res) => {
      data.newSongList = res.data.result;
    });
    getNewCD().then((res) => {
      data.newCDList = res.data.albums;
    });

    return {
      active,
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>
.topSongAndCD {
  margin-top: 0.2rem;
  box-sizing: border-box;
  padding: 0.2rem 0;
  background-color: #fff;
  margin-bottom: 1rem;

  a {
    text-decoration: none;
  }
  .van-swipe {
    height: 3rem;
    // background-color: black;

    width: 100%;
    height: 100%;
    .songItem {
      display: flex;
      align-items: center;
      .cover {
        width: 1rem;
        height: 1rem;
        margin: 0.1rem;
        img {
          height: 100%;
          width: 100%;
          border-radius: 0.15rem;
        }
      }
      .info {
        margin-left: 0.1rem;
        border-bottom: 0.02rem solid #eaeaea;
        padding: 0.2rem 0;
        .name,
        .desc {
          display: flex;
          align-items: center;
          width: 5rem;
          overflow: hidden;
          display: -webkit-box;
          ext-overflow: ellipsis;
          h4 {
            // width: 2.5rem;
            color: 323333;
            font-weight: 400;
            font-size: 0.3rem;
            vertical-align: center;
            color: #323333;
            white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
          }
          h5 {
            width: 2rem;
            color: #999999;
            font-weight: 400;
            white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
          }
        }
        .name {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>